<template>
	<div class="focus-advertising-container" :class="className">
		<div class="focus-other-layout"
			v-if="props.data.data && props.data.data?.list?.length !== 3 && props.data.data?.list?.length">
			<div class="focus-advertising-item item-border" v-for="item in props.data.data.list" :key="item">
				<img class="focus-item-image" :src="item.imgUrl" alt="" v-if="item.imgUrl" />
				<div class="image-null" v-else>
					<el-icon>
						<Picture />
					</el-icon>
				</div>
			</div>
		</div>

		<div class="focus-three-layout" v-else-if="props.data.data?.list && props.data.data?.list?.length === 3">
			<div class="focus-advertising-item item-border">
				<img class="focus-item-image" :src="props.data.data.list[0].imgUrl" alt=""
					v-if="props.data.data.list[0].imgUrl" />
				<div class="image-null" v-else>
					<el-icon>
						<Picture />
					</el-icon>
				</div>
			</div>
			<div class="focus-advertising-item-container">
				<div class="focus-advertising-item-child item-border" v-for="item in props.data.data.list.slice(1)"
					:key="item">
					<img class="focus-item-image" :src="item.imgUrl" alt="" v-if="item.imgUrl" />
					<div class="image-null" v-else>
						<el-icon>
							<Picture />
						</el-icon>
					</div>
				</div>
			</div>
		</div>

		<div class="notList" v-else>暂无菜单项</div>
	</div>
</template>

<script setup lang="ts">
const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => { },
	},
	className: {
		type: Object,
		default: () => { },
	},
});
</script>

<style lang="scss" scoped>
.focus-advertising-container {
	background-color: #fff;
	padding: 12px;

	.focus-other-layout {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: space-between;

		.focus-advertising-item {
			// width: 49%;  
			// min-height: 120px;
			width: 180px;
            height: 120px;
			box-sizing: border-box;
			border-radius: 8px;
			overflow: hidden;
			margin-bottom: 9px;

			.focus-item-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.focus-three-layout {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .focus-advertising-item {
            width: 144px;
            // min-height: 240px;
			height: 256px;
            border-radius: 8px;
            overflow: hidden;

            .focus-item-image {
                width: 100%;
                height: 100%;
                margin-bottom: 0;
            }
        }

        .focus-advertising-item-container {
            width: 59%;
            min-height: 240px;

            .focus-advertising-item-child {
                // width: 220px;
                // height: 125px;
				width: 220px;
                height: 123px;
                border-radius: 8px;
                overflow: hidden;
				margin-bottom: 10px;
				&:nth-child(2){
					margin-bottom: 0;
				}
				// margin-bottom: 3px;
                .focus-item-image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

	.image-null {
		width: 100%;
		height: 100%;
		font-size: 50px;
		scrollbar-width: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #c1c1c1;
	}

	.notList {
		width: 100%;
		height: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		color: #666;
	}
}
</style>
